<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/own.css" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<style type="text/css">
			.cenerdiv .mui-input-row .mui-icon-clear {
				line-height: 1.2rem;
			}
			
			input::-webkit-input-placeholder{
            	color:rgba(240,240,240,0.6);
	        }
	       
			.mui-checkbox input[type=checkbox]:before{
				color: #00CCFF;
				font-size: 1.1rem;
			}
			.mui-checkbox input[type=checkbox]:checked:before{
				color: #00CCFF;
			}
			
		</style>
		
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-1.7.2.min.js"></script>
		<script src="js/common.js"></script>
		
		
		<script type="text/javascript">
			$(function() {
				var winheight = window.innerHeight;
				$('.footerdiv').css("top", winheight * 0.88);
				$('.cenerdiv').css("top", winheight / 3);
			});
		
		</script>
	</head>

	<body class="own-background-img ">
		<div class="mui-content">
			<div class="topdiv">
				<!--<img style="width: 4rem;height: 4rem;" src="img/sy_icon.png" />-->
				<div style="font-size: 0.9rem;color: #FFFFFF;margin-top: 0.8rem;font-weight: 600;line-height: 1rem;">大坝碾压监测系统</div>
			</div>
			
			<div class="cenerdiv" >
				<table width="100%" border="0">
					<tr>
						<td>
							<div style="width: 15rem;margin: 0 auto;padding-top: 0;">
								<div class="mui-input-row" style="border-style:hidden hidden double hidden;border-width:0.06rem;border-color:rgba(240,240,240,0.6);;height: 2.5rem;">
									<div style="width:13rem; float:right;margin-top:0.5rem;">
										<input type="text" id="userid" name="userid" class="mui-input-clear" placeholder="请输入用户名" style="font-size:0.7rem;color: white;border:0;background-color:transparent;height: 2rem;line-height: 2rem;" value="" onpaste="return false;">
									</div>
									<div style="width:2rem; float:right;padding-top: 0.75rem;">
										
										<img src="img/sy_na.png" style="height: 1.2rem;width: 1.2rem;">
										<div class="mui-inline" style="width: 0.05rem;margin-left:0.5rem;height: 1.2rem;background: rgba(240,240,240,0.6);;"></div>
									</div>
								</div>
								<div class="mui-input-row" style="border-style:hidden hidden double hidden;border-width:0.06rem;border-color:rgba(240,240,240,0.6);;height: 2.5rem;">
									<div style="width:13rem; float:right;margin-top:0.5rem;">
										<input type="password" id="password" name="password" class="mui-input-clear" placeholder="请输入登陆密码" style="font-size:0.7rem;color: white;border:0;background-color:transparent;height: 2rem;line-height: 2rem;" value="" onpaste="return false;">
									</div>
									<div style="width:2rem; float:right;padding-top: 1rem;">
										<img src="img/sy_mm.png" style="height: 1.1rem;width: 1.1rem;">
										<div class="mui-inline" style="width: 0.05rem;margin-left:0.5rem;height: 1.2rem;background:rgba(240,240,240,0.6);;"></div>
										
									</div>
								</div>
								

								<button id="confBtn" type="button" class="mui-btn  own-btn-color" style="width: 15rem;color: #00CCFF;border-radius:2rem;background: #FFFFFF;height: 2.25rem;margin-top: 2rem;" onclick="login()"><div style="font-size: 0.8rem;">登  录</div></button>
							</div>
						</td>
					</tr>
				</table>
			</div>
			
			<div class="footerdiv">
				<img src="img/login_botom.png" style="width: 80%;"/>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		mui.init();
		var useid = null;
		var pswd = null;
		mui.plusReady(function(){
			localStorage.setItem('uuid',plus.device.uuid);
			
			plus.screen.lockOrientation("portrait-primary");//竖屏加载
		})
		
		function login(){
			 useid = $('#userid').val();
			 pswd = $('#password').val();
			if(isNull(useid)){
				mui.toast('请输入用户名')
				return;
			}
			if(isNull(pswd)){
				mui.toast('请输入登录密码')
				return;
			}
		

			toLogin();
		}
		
		function toLogin(){
			var params = {
				'user':useid,
				'pswd':pswd
			}
			mpms_ajax(params,'getToken',loginBack);
		}
		
		function loginBack(data){
			localStorage.setItem('useid',useid);
			localStorage.setItem('pswd',pswd);
			localStorage.setItem('token',data.token);
			localStorage.setItem('node',data.node);
			mui.openWindow({
				url: 'view/main_tab.html',
				waiting: {
					autoShow: false //自动显示等待框，默认为true
				}
			});
			
		}
		
		//判断是否登陆
		window.addEventListener('load', function() {
			if(!isNull(localStorage.getItem('useid'))){  //自动登录
				gettoken();
			}
		});
		
	</script>

</html>